<template>
  <Codemirror class="complier" v-model:value="inputValue.code" @input="upDateValue" :options="cmOptions" border>
  </Codemirror>
</template>

<script setup>
import Codemirror from "codemirror-editor-vue3"
import "codemirror/theme/neat.css"
import "codemirror/theme/material-darker.css"
import 'codemirror/theme/3024-day.css'
import "codemirror/mode/clike/clike.js"
import 'codemirror/addon/selection/active-line'
import { reactive, defineEmits, defineProps, onMounted } from "vue"
const cmOptions = reactive({
  tabSize: 4,// tab的空格个数
  theme: '3024-day',//主题样式
  lineNumbers: true,//是否显示行数
  lineWrapping: true, //是否自动换行
  // viewportMargin :30,
  styleActiveLine: true,//line选择是是否加亮
  matchBrackets: true,//括号匹配
  mode: 'text/x-java', //实现javascript代码高亮
  readOnly: false,//只读
})

onMounted(() => {
  if (props.propCode.language === 'Java') {
    cmOptions.mode = 'text/x-java'
  } else if (props.propCode.language === 'C' || props.propCode.language === 'C With O2') {
    cmOptions.mode = 'text/x-csrc'
  } else if (props.propCode.language === 'C++' || props.propCode.language === 'C++ With O2') {
    cmOptions.mode = 'text/x-c++src'
  }
})

const props = defineProps({
  propCode: {
    type:Object,
    default:{
      code:'',
      language:'Java'
    }
  }
})
const inputValue = reactive(props.propCode)
const emits = defineEmits()
const upDateValue = (e) => {
  inputValue.code = e
  emits('update:propCode', inputValue)
}
</script>

<style lang="less" scoped>
.complier {
  width: 100%;
  height: 100%;
}
</style>